<template>
    <div class="common-layout">
      <el-container>
        <!--头-->
        <el-header  class="el-header">
          <img src="../resources/img/徽标LOGO.png" style="width: 45px;height: 45px;"></img>
              &nbsp;&nbsp;&nbsp;
          <span style="font-size: 25px;font-weight: bolder; color: white;">网安一体化平台·学生端</span>
          
          <span style="font-size: 15px;color: white; margin-right: 20px;margin-left: auto;font-weight: 400;">欢迎 {{name}}同学</span>
          <span><el-icon  :size="25"><Message/></el-icon></span>
          
        </el-header>
        <el-container>
          <!--左部区域-->
          <el-aside width="300px" style="">
              <el-scrollbar>
                <el-menu :default-openeds="['1', '5']">
                  <el-sub-menu index="1">
                    <template #title>
                      <el-icon><User /></el-icon>我的信息
                    </template>
                    <!--身份服务-->
                    <el-menu-item-group>
                      <template #title>身份服务</template>
                      <el-menu-item index="1-1" @click="ShowInfo">查看信息</el-menu-item>
                      <el-menu-item index="1-2" @click="ErrInfo">错误信息上报</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="密码服务">
                      <el-menu-item index="1-3" @click="ChangePassword">修改密码</el-menu-item>
                    </el-menu-item-group>
                  </el-sub-menu>
                  <!--比赛预约-->
                  <el-sub-menu index="2">
                    <template #title>
                      <el-icon><Tickets /></el-icon>我的考试
                    </template>
                    <el-menu-item-group>
                      <template #title>考试服务</template>
                      <el-menu-item index="2-1">考试预约</el-menu-item>
                      <el-menu-item index="2-2">预约凭证</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="成绩服务">
                      <el-menu-item index="2-3">成绩查询</el-menu-item>
                      <el-menu-item index="2-4">成绩申诉</el-menu-item>
                    </el-menu-item-group>
                  </el-sub-menu>
                  <!--我的竞赛-->
                  <el-sub-menu index="3">
                    <template #title>
                      <el-icon><MessageBox /></el-icon>我的竞赛
                    </template>
                    <el-menu-item-group>
                      <template #title>竞赛服务</template>
                      <el-menu-item index="3-1">竞赛报名</el-menu-item>
                      <el-menu-item index="3-2">取消报名</el-menu-item>
                    </el-menu-item-group>
                    <el-sub-menu index="3-4">
                      <template #title>我的队伍</template>
                      <el-menu-item index="3-4-1">我的队伍</el-menu-item>
                      <el-menu-item index="3-4-1">加入队伍</el-menu-item>
                    </el-sub-menu>
                    <el-menu-item-group title="准考证服务">
                      <el-menu-item index="3-3">出示准考证</el-menu-item>
                    </el-menu-item-group>
                  </el-sub-menu>

                  <!--统一身份认证-->
                  <el-sub-menu index="4">
                    <template #title>
                      <el-icon><Check /></el-icon>身份认证
                    </template>
                    <el-menu-item-group>
                      <template #title>认证服务</template>
                      <el-menu-item index="4-1">二维码出示</el-menu-item>
                      <el-menu-item index="4-2">申请二维码</el-menu-item>
                    </el-menu-item-group>
                  </el-sub-menu>

                 <!--实验室准入-->
                 <el-sub-menu index="5">
                    <template #title>
                      <el-icon><OfficeBuilding /></el-icon>实验室准入系统
                    </template>
                    <el-menu-item-group>
                      <template #title>实验室服务</template>
                      <el-menu-item index="5-1">准入凭证</el-menu-item>
                      <el-menu-item index="5-2">申请进入</el-menu-item>
                    </el-menu-item-group>
                  </el-sub-menu>

                  <!--系统设置-->
                  <el-sub-menu index="6">
                    <template #title>
                      <el-icon><Setting /></el-icon>系统设置
                    </template>
                    <el-menu-item-group>
                      <template #title>系统服务</template>
                      <el-menu-item index="6-1" @click="GetOut">退出登陆</el-menu-item>
                    </el-menu-item-group>
                  </el-sub-menu>
                 
                </el-menu>
              </el-scrollbar>
          </el-aside>
          <!--内容区域-->
          <el-main class="el-main">
            <RouterView></RouterView>
          </el-main>
        </el-container>
      </el-container>
    </div>
</template>
  

<script lang="ts" setup>
  import Welcome from '@/component/Welcome.vue';
  import PersonalInfo from '@/component/PersonalInfo.vue';
  import router from '@/router/router';
  import { ref } from 'vue';
  import { UserNameStore } from '@/Store/UserNameStore';
  import Cookies from 'js-cookie'

  function ShowInfo(){
    router.push('/Student/ShowInfo')
  }

  function ErrInfo(){
    router.push('/Student/ErrInfo')
  }

  function ChangePassword(){
    router.push('/Student/ChangePassword')
  }

  function GetOut(){
    Cookies.remove('token')//删除cookie
    router.push('/')
  }

  let name = Cookies.get('name')
  console.log("从pinia中读出"+UserNameStore().name)
  
</script>

<style lang="css" scope>
  .el-header {
  display: flex;          /* 使用Flexbox布局 */
  /* justify-content: center; 水平居中 */
  align-items: center;     /* 垂直居中 */
  /* height: 100px;          定义header的高度，根据需要调整 */
  background-color: #79bbff;  /* 背景颜色 */
  }

  .welcome-right {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  font-size: 15px;
  color: white;
  }

  .el-main {
  display: flex;          /* 启用 Flexbox 布局 */
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
  min-height: 100%;      /* 设置最小高度为视口高度 */
  background-color: white; /* 背景颜色 */
  } 
</style>